<template>
    <div class="car-content">
        <!-- 轮播图区域 -->
       <mt-swipe :auto="2000">
          <mt-swipe-item>
              <img src="../images/r5.png" alt="">
          </mt-swipe-item>
          <mt-swipe-item>
              <img src="../images/r6.png" alt="">
          </mt-swipe-item>
          <mt-swipe-item>
              <img src="../images/r7.png" alt="">
          </mt-swipe-item>
        </mt-swipe>  
        <div class="product-name">
            <p class="product-text">涟漪群</p>
        </div>  
        <p class="market-price">市场价:<del>￥777</del>&nbsp;&nbsp;购物价<b>$666</b></p>

       <!-- 购物数量区域 -->
        购买数量：
        <div class="mui-numbox" data-numbox-step='1' data-numbox-min='1' data-numbox-max='100'>
             <button class="mui-btn mui-numbox-btn-minus" type="button">-</button>
             <input class="mui-numbox-input" type="number" value="1"/>
             <button class="mui-btn mui-numbox-btn-plus" type="button">+</button>
        </div>
        <div class="sell-btn">
           <mt-button type="danger">加入购物车</mt-button> 
           <mt-button type="primary">立即购买</mt-button>
        </div>
    </div>
</template>
<script>
import mui from "../lib/mui/js/mui.min.js"
export default {
    name:"Shappingcar",
    components:{
       
    },
    created(){},
    mounted(){
        // 数字输入框初始化
        mui(".mui-numbox").numbox()
    }

}
</script>

<style scoped>
    .mint-swipe{
        height: 200px;     
    }
img{
    width: 100%;
    /* height: 100%; */
} 
.product-name{
    padding:10px;
    margin-top:3px;
    text-align:center;
    font-size: 20px;
   
   background: #fff;
    box-shadow:0 0 4px gray;
}
.product-name .product-text{
    font-size: 20px;
    font-weight:bold;
    color:black;
}
.market-price{
    margin-top:2px;
    box-shadow:0 0 6px lime;
}
.market-price b{
    color:red;
    font-size: 20px;
}
.sell-btn{
    margin-top:10px;
}
</style>